<template>
  <div class="data-container">
    <el-row>
      <el-col :span="20" :offset="2"
        ><el-card shadow="always">
          <div v-for="(item, index) in formJsonRelation" :key="index">
            <div class="item-container">
              <div class="name" style="margin-top: 20px">
                {{ index + 1 }}.
                <el-tag>{{ types[item.type] }}</el-tag>
                {{ item.title }}
              </div>
              <div class="chart-container">
                <el-tabs style="margin-top: 10px" v-model="tabs_active[index]" type="card">
                  <el-tab-pane label="数据展示" name="data">
                    <div v-if="item.type === 'input'">
                      <input-wrapper :res="item" />
                    </div>
                    <div v-if="item.type === 'radio'">
                      <radio-wrapper :res="item" />
                    </div>
                    <div v-if="item.type === 'checkbox'">
                      <checkbox-wrapper :res="item" />
                    </div>
                    <div v-if="item.type === 'inputNumber'">
                      <inputnumber-wrapper :res="item" />
                    </div>
                    <div v-if="item.type === 'select'">
                      <select-wrapper :res="item"></select-wrapper>
                    </div>
                    <div v-if="item.type === 'switch'">
                      <switch-wrapper :res="item" />
                    </div>
                    <div v-if="item.type === 'timePicker'">
                      <timepicker-wrapper :res="item" />
                    </div>
                    <div v-if="item.type === 'slider'">
                      <slider-wrapper :res="item" />
                    </div>
                    <div v-if="item.type === 'rate'">
                      <rate-wrapper :res="item" />
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="频率统计" name="data2">
                    <times-wrapper :res="item" />
<!--                    <el-table :data="item" style="width: 100%">-->
<!--                      <el-table-column fixed label="编号" width="180" type="index">-->
<!--                      </el-table-column>-->
<!--                      <el-table-column prop="key" label="答案"> </el-table-column>-->
<!--                    </el-table>-->
                  </el-tab-pane>
                </el-tabs>

              </div>
            </div>
          </div>
      </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import timepickerWrapper from '@/components/recycle/timepickerWrapper'
import inputWrapper from '@/components/recycle/inputWrapper'
import radioWrapper from '@/components/recycle/radioWrapper'
import checkboxWrapper from '@/components/recycle/checkboxWrapper'
import inputnumberWrapper from '@/components/recycle/inputnumberWrapper'
import selectWrapper from '@/components/recycle/selectWrapper'
import switchWrapper from '@/components/recycle/switchWrapper'
import sliderWrapper from '@/components/recycle/sliderWrapper'
import rateWrapper from '@/components/recycle/rateWrapper'
import { getFormDataOne, getQuestionCount, getQuestionList, findFormJsonOne } from '@/api/form'
import timesWrapper from "../../../components/recycle/timesWrapper";
export default {
  name: 'dataRecycling',
  components: {
    inputWrapper,
    radioWrapper,
    checkboxWrapper,
    inputnumberWrapper,
    selectWrapper,
    switchWrapper,
    timepickerWrapper,
    sliderWrapper,
    rateWrapper,
    timesWrapper
  },
  async mounted() {
    this.fid = this.$route.query.id
    console.log('fid', this.fid)
    await this.getFormData()
    await this.getFormJson()
    // const { data } = await getQuestionList("c575re91b9l9")
    // console.log('question', data)
    // const { Data2 } = await getQuestionCount('c575re91b9l9')
    // console.log('pinlv', Data2)
  },
  data() {
    return {
      tabs_active:[],//tab活跃标签
      data_coll:[],//数据集合
      types: {
        '': '未知',
        'input': '输入题',
        'rate': '评分题',
        'inputNumber': '计数器',
        'radio': '单选框',
        'checkbox': '多选框',
        'select': '选择器',
        'switch': '开关',
        'timePicker': '时间选择器',
        'slider': '滑块'
      },
      fid: null,
      formData: null,
      formJson: null,
      //  要渲染的Json
      formJsonTure: null,
      //  field和type对象关系的结构
      formJsonRelation: []
    }
  },
  methods: {
    async getFormData() {
      const { data } = await getFormDataOne(this.fid)
      this.formData = data.data ? data.data : {}
      console.log('formData', this.formData)
    },
    async getFormJson() {
      const { data } = await findFormJsonOne(this.fid)
      this.formJson = data.data ? data.data : {}
      //按题目循环
      this.formJsonTure = this.formJson.filter((item) => {
        return item.hasOwnProperty('field')
      })
      console.log('this.formJsonTure', this.formJsonTure)
      this.formJsonTure.map(item => {
        this.tabs_active.push('data2')

        this.formJsonRelation.push({ 'title': item.title, 'field': item.field, 'type': item.type, 'options': item.options || '' })
      })
      console.log('formJsonRelation', this.formJsonRelation)
      //循环模型
      // for (const index in this.formJsonTure) {

      //   //1获取每道题的数据组合成数组
      //   //1-1循环formdata里的每个成员的题目答案
      //   //每道题答案的数组
      //   let arr_ans = []
      //   try {
      //     for (const item_ans of this.formData) {
      //       //取这道题的答案
      //       console.log('test')
      //       arr_ans.push(item_ans.data[this.formJsonTure[index].field])
      //     }
      //   } catch (e) {
      //     console.log('有错误', e)
      //   }
      //   //2组装 数据 题目 类型 三个属性
      //   this.formJsonRelation.push({
      //     'title': this.formJsonTure[index].title,
      //     'data': arr_ans,
      //     'field': this.formJsonTure[index].field,
      //     'type': this.formJsonTure[index].type
      //   })
      // }

      // console.log('formJsonRelation', this.formJsonRelation)
      // })
      // console.log(this.formJsonTure)
      // let obj = {}
      // //按题目寻找类型
      // this.formJsonTure.map((item) => {
      //   obj = { field: item.field, type: item.type }
      // })
      // console.log('obj', obj)
      // console.log(this.formJsonRelation)
      // //填充数据
      // this.formData.forEach(item=>{

      //   obj.data = b;
      // })
      // this.formJsonRelation.push(obj)
    }
  }
}
</script>

<style>
</style>
